<template>
   <div style="width: 100%;height: 90%;background-color: #F2F2F2;">
      团购管理
      <div style=" width: 90%;height: 90%; background-color: #fff; margin-left: 5%;margin-top: 30px; overflow: scroll;">
         <div class="head">
            <el-input v-model="input" placeholder="请输入搜索楼盘名称"
               style="width: 200px; float: left;  margin-top: 15px;"></el-input>
            <el-form-item label="状态:" style="float: left; margin-top: 15px; margin-left: 30px;">
               <el-select v-model="formInline.zhuangtai" placeholder="状态选择" style="width: 100px;">
                  <el-option label="开启" value="shanghai"></el-option>
                  <el-option label="关闭" value="beijing"></el-option>
               </el-select>
            </el-form-item>
            <el-select v-model="formInline.shengfen" placeholder="省份选择" style="width: 100px;margin-left: 30px;">
               <el-option label="北极" value="北极"></el-option>
               <el-option label="南极" value="南极"></el-option>
            </el-select>
            <el-select v-model="formInline.shiqu" placeholder="市城选择" style="width: 100px;margin-left: 30px;">
               <el-option label="北水市" value="北水市"></el-option>
               <el-option label="南水市" value="南水市"></el-option>
            </el-select>
            <el-select v-model="formInline.xianqu" placeholder="县城选择" style="width: 100px;margin-left: 30px;">
               <el-option label="新城县" value="新城县"></el-option>
               <el-option label="旧城县" value="旧城县"></el-option>
            </el-select>
            <el-button type="primary" style="margin-left: 30px;" @click="chaxun">查询</el-button>
            <el-button type="success" style="margin-left: 30px;" @click="() => xingzeng = true">新增</el-button>
         </div>

         <div class="biaocentent">
            <el-table :data="obj" style="width: 100%;text-align:center;">
               <el-table-column prop="province" label="所在省份" width="90">
               </el-table-column>
               <el-table-column width="120" label="房间布局">
                  <template #default="scoped">
                     <el-image :src="scoped.row.img"></el-image>
                  </template>
               </el-table-column>
               <el-table-column prop="house_name" label="楼盘名称" width="90">
               </el-table-column>
               <el-table-column prop="group_info" label="楼盘福利" width="180">
               </el-table-column>
               <el-table-column prop="end_time" label="开售时间" width="180">
               </el-table-column>
               <el-table-column prop="city" label="所在市城" width="100">
               </el-table-column>
               <el-table-column width="100" label="所在县/区" prop="county">
               </el-table-column>
               <el-table-column label="状态" width="100">
                  <template #default="scoped">
                     <el-switch v-model="scoped.row.status" active-color="#13ce66" inactive-color="#ff4949">
                     </el-switch>
                  </template>
               </el-table-column>
               <el-table-column width="100" style="text-align: center;">
                  <template #default="scoped">
                     <button style="border: 0; background-color: #fff; color: blue;"
                        @click="del(scoped.row.group_id)">删除</button>
                  </template>
               </el-table-column>
            </el-table>
         </div>
         <div
            style="width: 400px; height: 500px; z-index: 10; background-color: #ccc; position: fixed; left: 40%; top: 200px;"
            v-show="xingzeng">
            <el-form label-position="left" style="margin-left: 45px;" label-width="80px" :model="formLabelAlign">
               <el-form-item label="所在省份" style="width: 300px;">
                  <el-input v-model="formLabelAlign.sheng"></el-input>
               </el-form-item>
               <el-form-item label="房间布局" style="width: 300px;">
                  <el-input v-model="formLabelAlign.fang"></el-input>
               </el-form-item>
               <el-form-item label="楼盘名称" style="width: 300px;">
                  <el-input v-model="formLabelAlign.louname"></el-input>
               </el-form-item>
               <el-form-item label="楼盘福利" style="width: 300px;">
                  <el-input v-model="formLabelAlign.loufu"></el-input>
               </el-form-item>
               <el-form-item label="开售时间" style="width: 300px;">
                  <el-input v-model="formLabelAlign.kaishijian"></el-input>
               </el-form-item>
               <el-form-item label="所在市城" style="width: 300px;">
                  <el-input v-model="formLabelAlign.suoshi"></el-input>
               </el-form-item>
               <el-form-item label="所在县/区" style="width: 300px;">
                  <el-input v-model="formLabelAlign.suoxian"></el-input>
               </el-form-item>
               <el-form-item label="状态" style="width: 300px;">
                  <el-input v-model="formLabelAlign.zhuangtais"></el-input>
               </el-form-item>
               <el-form-item label="id" style="width: 300px;">
                  <el-input v-model="formLabelAlign.id"></el-input>
               </el-form-item>
            </el-form>
            <el-button type="primary" style="margin-left: 30px;" @click="() => xingzeng = false">取消</el-button>
            <el-button type="success" style="float: right; margin-right: 30px;" @click="queren">确认</el-button>

         </div>
      </div>
   </div>
</template>
<script lang="ts" setup>
import axios from '../../utils/request'
import { Buylistdel, Buyxingzeng, Buycha } from '../../api/mysql'
import { reactive, ref, onMounted } from 'vue'
const input = ref();
const obj = ref();
const xingzeng = ref(false);
const formInline = ref({
   zhuangtai: "",
   shengfen: "",
   shiqu: "",
   xianqu: ""
});
const formLabelAlign = ref({
   id: "",
   sheng: "",
   fang: "",
   louname: "",
   loufu: "",
   kaishijian: "",
   suoshi: "",
   suoxian: "",
   zhuangtais: true
})
//团购列表数据
function Buylist() {
   axios.get('/api/api/v1/group')
      .then(res => {
         obj.value = res.data.data.data;
         console.log(res.data.data.data);
      })
}
Buylist();
//团购删除列表数据
const del = (id: string) => {
   Buylistdel(id)
      .then(res => {
         console.log(res);
      })
   Buylist();
}
//团购新增列表数据
const queren = () => {
   const xingzengdatalist = {
      "img": formLabelAlign.value.fang,
      "house_name": formLabelAlign.value.louname,
      "group_title": '',
      "province": formLabelAlign.value.sheng,
      "city": formLabelAlign.value.suoshi,
      "county": formLabelAlign.value.suoxian,
      "address": "",
      "start_time": '',
      "end_time": formLabelAlign.value.kaishijian,
      "group_info": formLabelAlign.value.loufu,
      "initiator": '',
      "group_id": formLabelAlign.value.id,
      "group_status": '',
      "max_people_count": "",
      "now_people_count": '',
      "status": formLabelAlign.value.zhuangtais
   }
   Buyxingzeng(xingzengdatalist).then(res => {
      console.log(res);
   })
   xingzeng.value = false;
   Buylist();
}
//团购查询数据
const chaxun = () => {
   console.log(formInline.value);
   if (formInline.value.shengfen != "" && formInline.value.shiqu != "" && formInline.value.xianqu != "") {
      const data: any = {
         house_name: input.value,
         province: formInline.value.shengfen,
         city: formInline.value.shiqu,
         county: formInline.value.xianqu
      }
      chazhao(data);
   }
   else {
      const data: any = {
         house_name: input.value,
      }
      chazhao(data);
   }
   function chazhao(data: any) {
      Buycha(data).then(res => {
         console.log(res);
         obj.value.length = 0;
         res.data.data.data.forEach((item:any) => {
             obj.value.push(item)  
         });
      })
   }
}
</script>
<style lang="scss" scoped>
.head {
   width: 100%;
   height: 60px;
   // background-color: pink;
   line-height: 60px;

}

table {
   width: 100%;
   border-collapse: collapse;

   .a1 {
      height: 80px;
      background-color: #F2F2F2;
      text-align: center;

      td {
         font-weight: bold;
         text-align: center;
      }
   }

   .a2 {
      border: 1px solid #F2F2F2;
      padding: 8px;
      text-align: center;

      td {
         border: 1px solid #F2F2F2;
         padding: 8px;
         text-align: center;
      }
   }
}
</style>